﻿@using System.Configuration
@using System.Data.SqlClient
@{
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Load Roster Page";

    bool hasError = false;
    string errorMessage = string.Empty;

    System.Data.DataSet ds = new System.Data.DataSet("CurrentClaims");
    System.Data.DataTable dtClaims = null;
    
    if (IsPost)
    {
        if (Request.Form["actionButton"] == "upload_roster")
        {
            string uploadedFilePath = Server.MapPath("~/Content/templates/Roster.xlsx");
        } // if (Request.Form["actionButton"] == "upload_roster")

        if (Request.Form["actionButton"] == "approval_submission")
        {
            using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["EOCS"].ConnectionString))
            {

                System.Data.SqlClient.SqlCommand cmd = conn.CreateCommand();
                cmd.CommandText = "UPDATE Claim SET Status = 1 WHERE Status = 0 AND EntryOwner = @EntryOwner;";

                cmd.Parameters.AddWithValue("@EntryOwner", User.Identity.Name);
                
                conn.Open();
                cmd.ExecuteNonQuery();
            }
        }
        
    } // if (IsPost)
    
}

<div class="container-fluid main-content" role="main">

    <h2>
        Load Roster
    </h2>

    <div class="panel panel-default">
        <div class="panel-heading">Instructions (How should this page work?)</div>
        <div class="panel-body">
            <p>
                This page should be accessible only to HR personel (only?).<br />
                The idea here is to allow users to download a Excel (xlsx) file template <a href="#">here</a> where they can fill up roster of their employees at site.<br/>
                After the roster is filled up, user can upload the roster into the system.<br/>
                Thereafter, when the employee log into the system, they only have to edit.
            </p>

            <ul>
                
            </ul>
        </div>
    </div>

    @if (hasError)
    {
    <div class="alert alert-danger alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <strong>Warning!</strong> @errorMessage
    </div>
    }

    @using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["EOCS"].ConnectionString))
    {
        System.Data.SqlClient.SqlCommand cmd = conn.CreateCommand();
        cmd.CommandText = "SELECT * FROM Claim WHERE EntryOwner = @EntryOwner AND Status = 0;";
        cmd.Parameters.AddWithValue("@EntryOwner", User.Identity.Name);

        System.Data.SqlClient.SqlDataAdapter da = new System.Data.SqlClient.SqlDataAdapter(cmd);
        da.Fill(ds, "CurrentClaims");

        if (ds.Tables.Count > 0)
        {
            dtClaims = ds.Tables["CurrentClaims"];
        }
    }

    <form method="post">

        <div class="form-group">
            <label for="rosterInputFile">Upload Roster File</label>
            <input type="file" id="rosterInputFile">
            <p class="help-block">Select Excel (XSLX) File to upload into system.</p>
        </div>
        
        <p>
            <button type="submit" name="actionButton" value="upload_roster" class="btn btn-primary">Upload Roster</button>
        </p>

    </form>


</div>

@section Scripts
{
    <script type="text/javascript" src="~/Scripts/kendo/2014.3.1119/kendo.ui.core.min.js"></script>
    <script type="text/javascript" src="~/Scripts/moment.js"></script>
    <script type="text/javascript" src="~/Scripts/moment-with-locales.js"></script>
    <script type="text/javascript">
    (function ($) {
        "use strict";

        var optionsDate, optionsTime, optionsNumeric, moneyNumeric, 
            ctlClaimDate,
            ctlClaimStartWorkTime,
            ctlClaimEndWorkTime,
            ctlClaimStartOT,
            ctlClaimEndOT,
            ctlClaimHours_OT1_5,
            ctlClaimHours_OT2_0,
            ctlClaimHours_PH,
            ctlClaimHours_Less4H,
            ctlClaimHours_More4H,
            ctlClaimAllowance_Shift,
            ctlClaimAllowance_Meal,
            ERROR_STATUS_COLOR,
            NORMAL_STATUS_COLOR;

        ERROR_STATUS_COLOR = "#ff0000";
        NORMAL_STATUS_COLOR = "#ffffff";

        optionsDate = {
            format: "dd/MM/yyyy",
            parseFormats: [
            "dd/MMMM/yyyy",
            "dd-MMMMyyyy",
            "dd/MM/yyyy",
            "dd-MM-yyyy",
            "ddMMyyyy",
            "ddMMyy",
            "ddMM"
            ],
            change: function () {
                if (this.element.val().trim() === "") {
                    this.element.css("background-color", ERROR_STATUS_COLOR);
                    return;
                }

                var value = this.value();

                if (value === null) {
                    this.element.css("background-color", ERROR_STATUS_COLOR);
                    return;
                }

                this.element.css("background-color", NORMAL_STATUS_COLOR);

                console.log(value); //value is the selected date in the numerictextbox
            }
        }; // optionsDate = {

        optionsTime = {
            interval: 15,
            parseFormats: [
            "h:mm tt",
            "h:mmtt",
            "hmmtt",
            "HH:mm",
            "HHmm",
            "htt",
            "HH"
            ], //format also will be added to parseFormats
            change: function () {
                if (this.element.val().trim() === "") {
                    this.element.css("background-color", ERROR_STATUS_COLOR);
                    return;
                }

                var value = this.value();

                if (value === null) {
                    this.element.css("background-color", ERROR_STATUS_COLOR);
                    return;
                }

                this.element.css("background-color", NORMAL_STATUS_COLOR);

                console.log(value); //value is the selected date in the numerictextbox
            }
        }; // optionsTime = {

        optionsNumeric = {
            spinners: false,
            format: "0.##",
            min: 0,
            decimals: 2,
            change: function () {
                var value = this.value();

                console.log(value); //value is the selected date in the numerictextbox
            }
        }; // optionsNumeric = {

        moneyNumeric = {
            spinners: false,
            format: "0.00",
            min: 0,
            decimals: 2,
            change: function () {
                var value = this.value();

                console.log(value); //value is the selected date in the numerictextbox
            }
        }; // moneyNumeric = {

        $(document).ready(function () {

            ctlClaimDate = $("#claimDate").kendoDatePicker(optionsDate);

            ctlClaimStartWorkTime = $("#claimStartWorkTime").kendoTimePicker(optionsTime);
            ctlClaimEndWorkTime = $("#claimEndWorkTime").kendoTimePicker(optionsTime);
            ctlClaimStartOT = $("#claimStartOT").kendoTimePicker(optionsTime);
            ctlClaimEndOT = $("#claimEndOT").kendoTimePicker(optionsTime);

            ctlClaimHours_OT1_5 = $("#claimHours_OT1_5").kendoNumericTextBox(optionsNumeric);
            ctlClaimHours_OT2_0 = $("#claimHours_OT2_0").kendoNumericTextBox(optionsNumeric);
            ctlClaimHours_PH = $("#claimHours_PH").kendoNumericTextBox(optionsNumeric);
            ctlClaimHours_Less4H = $("#claimHours_Less4H").kendoNumericTextBox(optionsNumeric);
            ctlClaimHours_More4H = $("#claimHours_More4H").kendoNumericTextBox(optionsNumeric);

            ctlClaimAllowance_Shift = $("#claimAllowance_Shift").kendoNumericTextBox(moneyNumeric);;
            ctlClaimAllowance_Meal = $("#claimAllowance_Meal").kendoNumericTextBox(moneyNumeric);;

            ////////////////////////////////////////////////////////////////////////////////
            // datepicker
            $(".datepicker").change(function (e) {
                //$(e.target).data("kendoDatePicker").trigger("change");
            });

            ////////////////////////////////////////////////////////////////////////////////
            // timepicker
            $(".timepicker").change(function (e) {
                //$(e.target).data("kendoTimePicker").trigger("change");
            });

        });

    }(jQuery));

    </script>
}